<script setup lang='ts'>
        import ShowCase from "./components/IfShowCase.vue"
        // import EventCase from './components/02_Vue3事件传递参数.vue'
        import BindCase from './components/03_Vue3的属性绑定.vue'
        import ForCase from './components/04_Vue3中循环列表.vue'
        import ModelCase from './components/05_Vue3中的双向绑定.vue'
        import ComputedCase from "./components/06_Vue3中的计算属性.vue"
        import NBCase from "./components/11_综合案例.vue"
        import HmHeader from "./components/HmHeader.vue"
        import HmBody from "./components/HmBody.vue"
        import HmFooter from "./components/HmFooter.vue"
        import Parent from "./components/13_父子通信中的父组件.vue"
        import GrandFather from './components/15_跨代传值的爷爷组件.vue'
        import SlotCase from './components/18_默认插槽技术.vue'
        import HmTable from './components/19_Vue3中封装table组件.vue'
        import TestTable from './components/20_作用域插槽的简单版本.vue'
        import { ref } from "vue"

type PersonColumnArr = Array<{ label: string, field: string }>
type PersonArr = Array<{ id: number, username: string, age: number }>
const columns: PersonColumnArr = [
  { label: '序号', field: "id" },
  { label: '姓名', field: "username" },

  { label: '年纪', field: "age" },
  { label: '操作', field: "" },
]

const data = ref<PersonArr>([
  {
    id: 1,
    username: '张小华',
    age: 18
  },
  {
    id: 2,
    username: '高大明',
    age: 18
  }, {
    id: 3,
    username: '刘德住',
    age: 20
  }

])

const delRow = (row: { id: number, username: string, age: number }) => {
  data.value = data.value.filter(item => item.id !== row.id)
}
</script>
       
<template>
       <!-- <ShowCase></ShowCase> -->
       <!-- <EventCase></EventCase> -->
        <!-- <BindCase></BindCase> -->
        <!-- <ForCase></ForCase> -->
        <!-- <ModelCase></ModelCase> -->
        <!-- <ComputedCase></ComputedCase> -->
        <!-- <NBCase></NBCase> -->
        <!-- <div class="container">
                <HmHeader></HmHeader>
                <HmBody></HmBody>
                <HmFooter></HmFooter>
        </div> -->
        <!-- <Parent></Parent> -->
        <!-- <GrandFather></GrandFather> -->
  <!-- <SlotCase >
    <h1>我是传入的</h1>
    <template #Header>
        <div>头部</div>
  </template>
  <template #Body>
        <div></div>
  </template>
  </SlotCase> -->
  <!-- <HmTable :columns="columns" :data="data">
    <template #row="obj">
      <button>编辑</button>
      <button @click="delRow(obj.row)">删除</button>
    </template>

  </HmTable> -->
  <!-- <TestTable>
    <template #row="{ p }">
      <h2>姓名：{{ p.name }}, 年龄： {{ p.age }}</h2>
    </template> -->
    <!-- 子组件的数据 父组件 -传入插槽时使用 使用 -->
  <!-- </TestTable> -->
  <!-- 一级路由容器 -->
  <div class="container">
    <div class="nav">
      <router-link to ='/home'>去主页</router-link>
      <router-link to ='/login'>去登录</router-link>
    </div>
    <router-view></router-view>

  </div>
  
</template>

       
<style scoped>
/* .container{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

} */
.container {
  width: 50%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: pink;
}
.nav a{
  margin-left: 10px;
  text-decoration: none;
}
.router-link-active{
  font-size: 30px;
}
       
</style>